<template>
	<view>
		<view class="dice-container">
			<view class="dice" :style="{ transform: diceTransform }">
				<view class="face face1">
					<view class="dot dot-center red size24"></view>
				</view>
				<view class="face face2">
					<view class="dot dot-top-left red"></view>
					<view class="dot dot-top-right red"></view>
					<view class="dot dot-bottom-left red"></view>
					<view class="dot dot-bottom-right red"></view>
				</view>
				<view class="face face3">
					<view class="dot dot-top"></view>
					<view class="dot dot-center"></view>
					<view class="dot dot-bottom"></view>
				</view>
				<view class="face face4">
					<view class="dot dot-top"></view>
					<view class="dot dot-center"></view>
					<view class="dot dot-bottom"></view>
				</view>
				<view class="face face5">
					<view class="dot dot-top-left"></view>
					<view class="dot dot-top-right"></view>
					<view class="dot dot-top-right"></view>
					<view class="dot dot-bottom-left"></view>
					<view class="dot dot-bottom-right"></view>
				</view>
				<view class="face face6">
					<view class="dot dot-top-left"></view>
					<view class="dot dot-top-right"></view>
					<view class="dot dot-bottom-left"></view>
					<view class="dot dot-bottom-right"></view>
				</view>
			</view>
		</view>
		<button @click="rollDice">Roll the dice!</button>
	</view>
</template>
<script setup lang="uts">
	import { ref } from 'vue';
	const diceTransform = ref('');
	const rollDice = () => {
		const randomX = Math.floor(Math.random() * 360);
		const randomY = Math.floor(Math.random() * 360);
		diceTransform.value = `rotateX(${randomX}deg) rotateY(${randomY}deg)`;
	}
</script>
<style lang="scss" scoped>
	.dice-container {
		perspective: 1000px;
	}

	.dice,
	.dice1 {
		width: 100px;
		height: 100px;
		position: relative;
		transform-style: preserve-3d;
		transition: transform 1s;
	}

	.face {
		position: absolute;
		width: 100px;
		height: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 50px;
		color: #fff;
		border: 1px solid #fff;
		background-color: #e9e9eb;
	}
	.dot-top-left{
		position: absolute;
		left:10%;
		top:10%;
	}
	.dot-top-center{
		position: absolute;
		left:50%;
		top:10%;
		transform: translateX(-50%);
	}
	.dot-top-right{
		position: absolute;
		right:50%;
		top:10%;
	}
	.dot-bottom-left{
		position: absolute;
		left:10%;
		bottom:10%;
	}
	.dot-bottom-center{
		position: absolute;
		left:50%;
		bottom:10%;
		transform: translateX(-50%);
	}
	.dot-bottom-right{
		position: absolute;
		right:50%;
		bottom:10%;
	}


	.face1 {
		transform: translateZ(50px);
	}
	.dot {
		width: 25%;
		height: 25%;
		border-radius: 50%;
		background-color: #030ab1;
		margin: 3px;
	}
	.size24{
		width: 30%;
		height: 30%;
	}
	.red{
		background-color: #fa1604;
	}

	.face2 {
		transform: rotateY(90deg) translateZ(50px);
	}

	.face3 {
		transform: rotateX(90deg) translateZ(50px);
	}

	.face4 {
		transform: rotateY(180deg) translateZ(50px);
	}

	.face5 {
		transform: rotateX(-90deg) translateZ(50px);
	}

	.face6 {
		transform: rotateY(-90deg) translateZ(50px);
	}
</style>